<template>
<div id="submit">
    <div id="header">
        <a href="JavaScript:;" @click="backIndex()"><img src="../assets/Submit/return.png" /></a>
        <el-button type="primary" @click="backIndex()">{{ courseName }}</el-button>
        <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal">
            <el-menu-item index="1">提交作业</el-menu-item>
            <el-menu-item index="2">作业讨论</el-menu-item>
        </el-menu>
        <div></div>
    </div>
    <div id="content">
        <p>{{ homeworkName }}</p>
        <span>{{ homeworkDescrible }}</span>
        <div>
            <span>截止日期：{{ homeWorkDeadLine }}</span>
            <span>个人作业</span>
            <span>需要查重</span>
            <div class="check">
                <img src="../assets/Submit/check.png" /><span>查看谁交了</span>
            </div>
        </div>
        <el-button type="primary">更新提交</el-button>
        <div class="finsh"><span>已完成</span></div>
        <el-upload class="upload-demo" drag action="https://jsonplaceholder.typicode.com/posts/" multiple>
            <i class="el-icon-upload"></i>
            <div class="el-upload__text">
                <em>添加作业文件</em>
                <br />
                <label>支持各类文档、图片、代码、压缩包格式</label>
            </div>
            <div class="el-upload__tip" slot="tip">
                作业留言：
                <el-input placeholder="点击添加留言（仅老师可看）..."></el-input>
                <el-button type="primary">保存</el-button>
            </div>
        </el-upload>
        <div class="checkLog">
            <a href="JavaScript:;">查看日志 ></a>
        </div>
    </div>
</div>
</template>

<style lang="scss">
#submit {
    width: 100%;
    margin: 0 auto;

    #header {
        margin: 20px 80px;

        a {
            display: inline-block;

            img {
                position: relative;
                top: 10px;
                left: -20px;
            }
        }

        .el-button--primary {
            background-color: #2c58ab;
        }

        .el-menu.el-menu--horizontal {
            position: relative;
            display: inline-block;
            top: 20px;
            left: 500px;
        }

        .el-menu--horizontal>.el-menu-item.is-active {
            border-bottom: 5px solid #2c58ab;
        }

        div {
            margin: 40px;
            width: 1300px;
            height: 50px;
            border: 1px solid rgba(218, 220, 224, 1);
            border-radius: 8px;
        }
    }

    #content {
        margin: 20px 120px;

        p {
            font-size: 18px;
        }

        span {
            font-size: 13px;
            color: #707070;
        }

        div {
            span {
                display: inline-block;
                margin: 30px;
                margin-left: 0;
                padding: 2px 5px;
                background-color: #f1f3f4;
            }

            .check {
                position: absolute;
                top: 280px;
                left: 1300px;
                cursor: pointer;

                img {
                    position: relative;
                    top: 8px;
                    left: -10px;
                }

                span {
                    display: inline-block;
                    font-size: 15px;
                    background: none;
                }
            }
        }

        .el-button--primary {
            background: #32baf0;
            border: none;
        }

        .finsh {
            position: absolute;
            top: 345px;
            left: 1340px;

            span {
                font-size: 15px;
                background: none;
            }
        }

        .upload-demo {
            border: 1px solid #d9d9d9;
            border-radius: 10px;
            margin: 20px 0;
            padding: 20px 30px;

            .el-upload-dragger {
                height: 100px;
                border-radius: 0;
                border: 3px dashed #d9d9d9;

                [class^="el-icon-"],
                [class*=" el-icon-"] {
                    margin-right: 270px !important;
                }

                .el-upload__text {
                    position: absolute;
                    top: 30px;
                    left: 100px;
                    text-align: left;
                }

                .el-icon-upload {
                    margin: 20px;
                }
            }

            .el-upload__tip {
                width: 1263px;
                border-top: 1px solid #d9d9d9;
                margin-bottom: -20px;
                border-bottom-left-radius: 5px;
                border-bottom-right-radius: 5px;
                margin-left: -30px;
                height: 50px;
                padding-top: 20px;
                padding-left: 30px;
                padding-bottom: 0;
                background: #F1F3F4;
                ;
                font-size: 14px;
                color: black;

                .el-input {
                    width: 80%;
                }

                .el-button--primary {
                    margin-left: 40px;
                    width: 80px;

                    span {
                        display: inline;
                        font-size: 16px;
                        text-align: center;
                        background: none;
                    }
                }
            }
        }

        .checkLog {
            a {
                color: #32BAF0;
                font-size: 14px;
            }
        }
    }
}
</style>

<script>
export default {
    data() {
        return {
            activeIndex: "1",
            activeIndex2: "1",
            courseName: "",
            homeworkName: "",
            homeworkDescrible: "",
            homeWorkDeadLine: ""
        };
    },
    methods: {
        getInformation: function () {
            this.$axios
                .get("http://localhost:8080/course/get_course_by_id", {
                    params: {
                        id: localStorage.getItem("id")
                    }
                })
                .then(response => {
                    console.log(response.data.homeworkId);
                    this.courseName = response.data.courseName;
                })
                .catch(function (error) {
                    // 请求失败处理
                    console.log(error);
                });
        },
        getData: function () {
            let workId = this.getQueryVariable("workId");
            console.log(workId);
            this.$axios
                .get("http://localhost:8080/work/sel_work_by_course_id", {
                    params: {
                        courseId: localStorage.getItem("id")
                    }
                })
                .then(response => {
                    console.log(response.data);
                    let infromation = response.data[workId - 1];
                    this.homeworkName = infromation.name;
                    this.homeworkDescrible = infromation.describe;
                    this.homeWorkDeadLine = infromation.deadLine;
                })
                .catch(function (error) {
                    // 请求失败处理
                    console.log(error);
                });
        },
        backIndex: function () {
            window.location.href = './course?id=' + localStorage.getItem("id");
        },
        getQueryVariable: function (variable) {
            const query = window.location.search.substring(1);
            const vars = query.split("&");
            for (let i = 0; i < vars.length; i++) {
                const pair = vars[i].split("=");
                if (pair[0] === variable) { return pair[1]; }
            }
            return false;
        },
    },
    created() {
        this.getInformation();
        this.getData();
        // 设置休眠时间
        function sleep(time) {
            return new Promise(resolve => setTimeout(resolve, time));
        }
        // 等待半秒后获取数据
        sleep(500).then(() => {
            this.getInformation();
            this.getData();
        });
    }
};
</script>
